<template>
<div id="papersadd">
  <el-card>
    <div slot="header">
      <span>添加</span>
    </div>
    <el-form :model="formData" ref="formData" label-position="left" label-width="80px">
      <el-form-item label="标题">
        <el-input v-model="formData.title"></el-input>
      </el-form-item>
      <el-form-item label="大纲">
        <el-tree :render-after-expand="false" @check-change="selectNode" show-checkbox :data="outlinesList" :props="{
          children:'children',label:'text'
        }"></el-tree>
      </el-form-item>
      <el-form-item label="选项">
        <el-select v-model="formData.item_id">
          <el-option v-for="item in itemsList" :key="'item'+item.id" :label="item.text" :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="班级">
        <el-select v-model="formData.classes_id">
          <el-option v-for="item in classesList" :key="'item'+item.id" :label="item.classname" :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="save">保存</el-button>
      </el-form-item>
    </el-form>

  </el-card>

</div>
</template>

<script>
export default {
  data() {
    return {
      outlinesList: [],
      itemsList: [],
      classesList:[],
      formData: {
        title: "",
        content: [],
        item_id: "",
        classes_id:"",
      }
    };
  },
  created() {
    this.getOutlinesList()
    this.getItemsList()
    this.getClassesList()
  },
  methods: {
    save(){
      this.$http.post("/papers/add",this.$qs.stringify({
        title:this.formData.title,
        classes_id:this.formData.classes_id,
        item_id:this.formData.item_id,
        content:JSON.stringify(this.formData.content)
      })).then(result=>{
        this.$router.push({name:'paperslist'})
      })
    },
    selectNode(data,isSelect){
      if(data.children.length>0){
        return
      }
      if(isSelect){
        this.formData.content.push(data)
      }else{
        var index = this.formData.content.indexOf(data)
        this.formData.content.splice('index',1)
      }

      // console.log(data)
      // console.log(isSelect)
    },
    getClassesList() {
      this.$http.get("/classes/list").then(result => {
        this.classesList = result.data.data
        // console.log(this.classesList)
      });
    },
    getOutlinesList() {
      this.$http.get("/outlines/list").then(result => {
        this.outlinesList = this.$tree(result.data.data)
      });
    },
    getItemsList() {
      this.$http.get("/items/list").then(result => {
        this.itemsList = this.$tree(result.data.data)
      });
    }
  }
};
</script>
